<template>
	<div
			:class="prefixCls"
			class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
	>
		<div class="relative mx-auto h-full flex">
			<div
					:class="`${prefixCls}__left flex-1  bg-opacity-20 relative p-30px lt-xl:hidden`"
			>
				<!-- 左上角的 logo + 系统标题 -->
				
				<div class="absolute logo-title welcome">欢迎您，</div>
				<div class="absolute logo-title aiAdmin">使用AI企业管理系统</div>
				
				<!--        <div class="relative flex items-center text-white">-->
				<!--          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
				<!--          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
				<!--        </div>-->
				<!--        &lt;!&ndash; 左边的背景图 + 欢迎语 &ndash;&gt;-->
				<!--        <div class="h-[calc(100%-60px)] flex items-center justify-center">-->
				<!--          <TransitionGroup-->
				<!--            appear-->
				<!--            enter-active-class="animate__animated animate__bounceInLeft"-->
				<!--            tag="div"-->
				<!--          >-->
				<!--            <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />-->
				<!--            <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>-->
				<!--            <div key="3" class="mt-5 text-14px font-normal text-white">-->
				<!--              {{ t('login.message') }}-->
				<!--            </div>-->
				<!--          </TransitionGroup>-->
				<!--        </div>-->
			</div>
			<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
				<!-- 右边的登录界面 -->
				<Transition appear enter-active-class="animate__animated animate__bounceInRight">
					<div
							class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
					>
						<!-- 账号登录 -->
						<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)"/>
						<!--            &lt;!&ndash; 手机登录 &ndash;&gt;-->
						<!--            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
						<!--            &lt;!&ndash; 二维码登录 &ndash;&gt;-->
						<!--            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
						<!--            &lt;!&ndash; 注册 &ndash;&gt;-->
						<!--            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
						<!--            &lt;!&ndash; 三方登录 &ndash;&gt;-->
						<!--            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
					</div>
				</Transition>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import {underlineToHump} from '@/utils'

import {useDesign} from '@/hooks/web/useDesign'
import {useAppStore} from '@/store/modules/app'
import {ThemeSwitch} from '@/layout/components/ThemeSwitch'
import {LocaleDropdown} from '@/layout/components/LocaleDropdown'

import {LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue} from './components'

defineOptions({name: 'Login'})

const {t} = useI18n()
const appStore = useAppStore()
const {getPrefixCls} = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.logo-title {
  left: 72px;
  font-weight: 600;
  color: #0D0D0D;
}

.aiAdmin {
  font-size: 49px;
  top: 232px;
}

.welcome {
  top: 141px;
  font-size: 44px;
}

.#{$prefix-cls} {
  overflow: auto;
  
  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      // background-image: url('@/assets/svgs/login-bg.svg');
      background-image: url('@/assets/imgs/login/cover.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}
</style>
